<template>
  <div class="pay" v-loading="loading">
    <div class="block" style="margin-bottom: 10px">
      <el-date-picker
        v-model="start"
        type="datetime"
        placeholder="选择开始时间"
        value-format="yyyy-MM-dd HH:mm:ss">
      </el-date-picker>
      <span class="auxiliary">到</span>
      <el-date-picker
        v-model="end"
        type="datetime"
        placeholder="选择结束时间"
        value-format="yyyy-MM-dd HH:mm:ss">
      </el-date-picker>
      <div class="input-wrapper">
        <el-input v-model="order_num" placeholder="请输入订单号"></el-input>
      </div>
      <div class="input-wrapper">
        <el-input v-model="channel_name" placeholder="请输入渠道名称"></el-input>
      </div>
      <div class="select">
        <el-select v-model="order_status" placeholder="请选择">
          <el-option
            v-for="item in options2"
            :key="item.value"
            :label="item.label"
            :value="item.value"
            :disabled="item.disabled">
          </el-option>
        </el-select>
      </div>
      <el-button type="primary" @click="inquire">查询</el-button>
      <el-button type="danger" @click="download">下载</el-button>
    </div>
    <div>
      <Count :count_data="Count"></Count>
      <div class="table-wrapper">
        <el-table
          :data="tableData"
          border
        >
          <el-table-column
            prop="count"
            label="序号"
            align="center"
          >
            <template slot-scope="scope">
              {{(scope.$index + 1) + (page - 1) * pageSize}}
            </template>
          </el-table-column>
          <el-table-column
            prop="amount"
            label="金额(元)"
            align="center"
          >
          </el-table-column>
          <el-table-column
            prop="mer_order_no"
            label="订单号"
            align="center"
          >
          </el-table-column>
          <el-table-column
          prop="order_time_ts"
          label="订单时间"
          align="center" >
        </el-table-column>
          <el-table-column
            prop="mer_fee"
            label="商户费率"
            align="center" >
          </el-table-column>
          <el-table-column
            prop="mer_fee_amount"
            label="商户费率金额"
            align="center" >
          </el-table-column>
          <el-table-column
            prop="channel_name"
            label="渠道名称"
            align="center"
          >
          </el-table-column>

          <el-table-column
            prop="payroll_state"
            label="支付状态"
            align="center"
          >
          </el-table-column>

        </el-table>
      </div>

      <div class="pagination-wrapper"  v-if="tableData.length">
        <el-pagination
          @current-change="handleCurrentChange"
          background
          layout="prev, pager, next"
          :total="total"
          :page-size="pageSize"
        >
        </el-pagination>
      </div>
    </div>

  </div>
</template>

<script>
  import Count from '../Count/Count'
  const TYPE = 2;
  export default {
    name: "pay",
    data(){
      return{
        tableData: [],
        start:'',
        end:'',
        options2: [{
          value: '',
          label: '全部'
        }, {
          value: '1',
          label: '受理中'
        }, {
          value: '2',
          label: '受理成功'
        },
          {
            value: '3',
            label: '交易失败'
          },

          {
            value: '4',
            label: '订单重复'
          },
          {
            value: '5',
            label: '交易成功'
          }
        ],
        order_status: '', // 订单状态
        order_num: '', // 订单号
        transfer:{
          start:'',
          end:'',
          order_status:'', //
          order_num:'',
          channel_name:''
        },
        channel_name:"",
        trade_status: ['受理中', '受理成功', '交易失败', '订单重复', '交易成功'],
        pageSize:8,
        page:1,
        loading:true,
        pages:0,
        Count:{
          totle: 0, // 总笔数
          totle_suc: 0, // 成功笔数
          sum: 0, // 总金额
          sum_suc: 0 // 成功总额
        },
        channel_id:['新安','fula','pos通','ysepay','进账多'] //渠道
      }
    },

    computed:{
      total(){
        return parseInt(this.pages) * parseInt(this.pageSize)
      }

    },
    mounted () {
      // 初始化表格
      this.get_table_data({
        type: TYPE,
        page: 1,  // 当前页数
        num: this.pageSize, // 一页多少条
        token: localStorage['token'],
        start_time:this.transfer.start,
        end_time:this.transfer.end,
        mer_order_no:this.transfer.order_num,
        order_status:this.transfer.order_status,
        channel_name:this.transfer.channel_name
      });
    },
    methods:{
      handleCurrentChange (val) {
        this.loading = true;
        this.page = val;
        this.get_table_data({
          type: TYPE,
          page: val,  // 当前页数
          num: this.pageSize, // 一页多少条
          token: localStorage['token'],
          start_time:this.transfer.start,
          end_time:this.transfer.end,
          mer_order_no:this.transfer.order_num,
          order_status:this.transfer.order_status,
          channel_name:this.transfer.channel_name
        });
      },
      get_table_data (option) { // 获取表格数据
        // 显示加载框
        // 请求ajax
        this.axios.post('index?action=payment', option).then((res) => {
          this.loading = false;
          if (res.data.code === 1) {
            let tableData =res.data.result.pay_data; // 列表数据
            let pages= res.data.result.pages;  // 总页数
            this.pages = pages;
            this.tableData = tableData;
            this.Count.sum = Number(res.data.result.totle) / 100; // 总金额
            this.Count.totle = res.data.result.data_num; // 总笔数
            this.Count.totle_suc = res.data.result.succes_num; // 成功笔数
            this.Count.sum_suc = Number(res.data.result.succes_totle) /100;
            tableData.forEach((item)=>{
              // 过滤数据
              item.payroll_state = this.trade_status[parseInt(item.payroll_state)-1];
              item.order_time_ts = this.formatDate(item.order_time_ts * 1000, 'yyyy-mm-dd hh:MM:ss');
              item.mer_fee_amount =item.mer_fee_amount?Number(item.mer_fee_amount) / 100:0;
              item.amount = item.amount?Number(item.amount) / 100 : 0;

              // 渠道
              // item.channel_id = this.channel_id[Number(item.channel_id) - 1]; // 去除渠道过滤
            });
            return false;
          }
          if (res.data.code === -2 || res.data.code === -3 || res.data.code === -4) {
            // 跳转到登录
            localStorage['token'] = '';
            this.$router.replace({
              path: '/login'
            });
            return false
          }
          this.ElementUIMsg({
            message:res.data.msg,
            showClose: true,
            duration:2000,
            type:"error"
          });
          this.tableData = []
        }).catch(() => {

        });
      },
      inquire(){
        this.transfer.start = this.start;
        this.transfer.end = this.end;
        this.transfer.order_status = this.order_status;
        this.transfer.order_num = this.order_num;
        this.transfer.channel_name = this.channel_name;
        this.loading = true;
        this.get_table_data({
          type: TYPE,
          page: 1,  // 当前页数
          num: this.pageSize, // 一页多少条
          token: localStorage['token'],
          start_time:this.transfer.start,
          end_time:this.transfer.end,
          mer_order_no:this.transfer.order_num,
          order_status:this.transfer.order_status,
          channel_name:this.transfer.channel_name
        });
      },

      //点击下载
      download(){
        //http://121.43.187.220/index/index/exportExcel?
        window.location.href = `http://121.43.187.220/index/index/export_order?type=${TYPE}&token=${localStorage['token']}&start_time=${this.transfer.start}&end_time=${this.transfer.end}&mer_order_no=${this.transfer.order_num}&order_status=${this.transfer.order_status}&channel_name=${this.transfer.channel_name}`;
      }

    },
    components:{
      Count
    }
  }
</script>

<style scoped>
  .pay{
    min-height: 750px;
  }
  .block{
    padding: 20px 0 20px 20px;
    background-color: #e8e8e8;
  }
  .select{
    width: 200px;
    display: inline-block;
    vertical-align: top;
  }
  .select > .form-control {
    height: 40px;
  }
  .auxiliary {
    font-size: 14px;
  }
  .table-wrapper {
    padding: 0 20px;
  }
  .pagination-wrapper {
    margin: 0 20px;
    padding: 20px 0;
    text-align: center;
    background-color: #fff;
  }
  .input-wrapper {
    display: inline-block;
    width: 180px;
  }
</style>

